import { ref, watchEffect } from 'vue'
// import type { FormInstance } from 'element-plus'
import type LyForm from '@/base-ui/lyform/ly-from.vue'
import { ElNotification } from 'element-plus'
import { gmtToSeconds } from '@/utils/format'

// 这个hook主要是用于modal-dialog和modal-drawer组件, 因为他们基本一模一样
function useModal(props: any, emits: any) {
  const isVisible = ref(props.isShowModal)
  watchEffect(() => {
    isVisible.value = props.isShowModal
  })

  // const formRef = ref<FormInstance>()
  const formRef = ref<InstanceType<typeof LyForm>>()

  // 取消按钮
  const cancelClick = () => {
    // @ts-ignore
    formRef.value?.cleanFormData()
    // 请空表单
    emits('cancelClick')
  }
  // 确认按钮
  const confirmClick = () => {
    // @ts-ignore
    const formData = formRef.value?.getFormData()
    console.log(formData)
    // 这是一般情况，不需要处理时间
    if (!('bannedTime' in formData)) {
      emits('confirmClick', formData)
    }
    // 对封禁时间的处理
    // 前者判断这个属性是否存在  后边判断这个属性值是否为空，为空则是没选择时间
    else if ('bannedTime' in formData) {
      if (!formData['bannedTime']) {
        ElNotification.info('请先选择时间')
        return
      }
    } else {
      // 1.如果当前的值为-1代表选了永久封禁，直接跳出不执行
      if (formData['bannedTime'] === -1) {
        emits('confirmClick', formData)
        return
      }
      // 2.不是永久封禁
      // 将时间转换为秒
      const seconds = gmtToSeconds(formData['bannedTime'])
      if (seconds <= 0) {
        ElNotification.error('选择的时间要大于当前时间~')
        return
      } else {
        formData['bannedTime'] = seconds
        emits('confirmClick', formData)
      }
    }
    // 请空表单
    // @ts-ignore
    formRef.value?.cleanFormData()
  }

  return { isVisible, formRef, cancelClick, confirmClick }
}

export default useModal
